<template>
  <div>
      <!-- .number修饰符转数字 -->
      第{{index + 1}}题 {{num1}} + {{num2}} = <input type="text" size=2 v-model.number="sum"> <button @click="btn">提交</button>
  </div>
</template>

<script>
export default {
  props: ['arr', 'index'],
  data () {
    return {
      sum: ''
    }
  },
  // 计算属性
  computed: {
    num1 () {
      return parseInt(Math.random() * 10)
    },
    num2 () {
      return parseInt(Math.random() * 10)
    },
    ret () {
      return this.num1 + this.num2
    }
  },
  methods: {
    btn () {
      // 不能检测到数组值的变化
      // this.arr[this.index] = this.sum === this.ret ? 1 : 2
      // 使用数组变异方法实现响应式
      this.arr.splice(this.index, 1, this.sum === this.ret ? 1 : 2)
      // 或 $set 改变数组的值
      // this.$set(this.arr, this.index, this.sum === this.ret ? 1 : 2)
    }
  }
}
</script>

<style>

</style>
